class TextElement extends Element {
  constructor(layoutNode, context) {
    super(layoutNode, context)
  }

  transformEle(style) {
    let transform = 'matrix(0.992546, 0.121869, -0.121869, 0.992546, 0, 0)'
    console.log(transform)
    const transformFun = new Function(
      `function matrix(a,b,c,d,e,f){return {a,b,c,d,e,f}}return ${transform}`
    )
    console.log(transformFun())
    let matrix = transformFun()
    this.ctx.setTransform(matrix.a, matrix.b, matrix.c, matrix.d, matrix.e, matrix.f)
  }

  draw() {
    let { react, style, text } = this.layoutNode
    if (!text) return
    this.ctx.font = `${style.fontStyle || 'normal'} ${style.fontVariant || 'normal'} ${
      style.fontWeight
    } ${style.fontSize} ${style.fontFamily || 'Arial'}`

    this.parseTextNodeMatrix()
    this.ctx.fillStyle = style.color || '#555555'
    this.ctx.textAlign = style.textAlign || 'start'
    this.ctx.textBaseline = 'hanging' //"alphabetic|top|hanging|middle|ideographic|bottom";
    let w = react.width
    let fSize = parseInt(style.fontSize)
    let lineHeight = fSize / 3
    let tempW = 0
    let txts = []
    let txtTemp = ''
    text = text.replace(/\s+/g, '')
    // console.log(text.replace(/[\r\n]/g,''));
    let textArr = text.split('')
    for (let t = 0; t < textArr.length; t++) {
      let keyWorld = textArr[t]
      let tw = this.ctx.measureText(keyWorld)['width']
      let c = tempW + tw
      if (c > w + 1) {
        txts.push(txtTemp)
        txtTemp = ''
        tempW = 0
      }
      tempW += tw
      txtTemp += keyWorld
    }

    if (txtTemp) txts.push(txtTemp)
    if (txts.length > 1) {
      lineHeight = style.lineHeight
      switch (true) {
        case lineHeight == 'normal':
          lineHeight = fSize / 2
          break
        case lineHeight.endsWith('px'):
          lineHeight = parseInt(lineHeight)
          break
        default:
          lineHeight = 5
          break
      }
      for (let k = 0; k < txts.length; k++) {
        this.ctx.fillText(txts[k], react.left, react.top + (fSize + lineHeight) * k)
      }
    } else {
      this.ctx.fillText(text, react.left, react.top + lineHeight)
    }
  }
}
